<template>
<div id="comment">
<div id="mescroll" class="mescroll"  v-mescroll="{up:'upCallback',size:page.size,num:page.num}">
<div class="mescroll-bounce">
<div class="wrapper">
        <div id="purchased">
            <div class="purchased-top">
                <i class="iconfont icon-fanhui" @click="back()"></i>
                <span>评论</span>
            </div>
        </div>
        <div class="comment-box">
            <div v-if="commentlists.length < 1" class="commentlists-no">成为第一个评论的人</div>
            <div class="comment-list" v-for="(item,index) in commentlists"  v-if="commentlists.length > 0">
                <div class="comment-list-left" v-if="item.userHeadImg != null && item.userHeadImg != ''">
                    <img :src='$store.state.picHead + item.userHeadImg'>
                </div>
                <div class="comment-list-left" v-if="item.userHeadImg == null || item.userHeadImg == ''">
                    <div class="header-left head-image"></div>
                </div>
                <div class="comment-list-right">
                    <div class="comment-list-top">
                        <div class="comment-list-name">{{item.userName}}</div>
                        <div class="comment-list-reply" @click="onreply(item.id,item.userName,item.userId,0,index)" v-if="backShow">回复</div>
                        <router-link :to="{name:'login'}">
                            <div class="comment-list-reply" v-if="!backShow">回复</div>
                        </router-link>
                    </div>
                    <div class="comment-list-center">{{item.content}}</div>
                    <div class="comment-list-time">{{item.commentTime |stampFormate2}}</div>
                    <!--回复区域-->
                    <div class="comment-reply-content" v-if="item.comments != null && item.comments.length != 0">
                        <!--登陆-->
                        <div class="comment-reply-back" v-for="replyuser in item.comments" @click="addreply(item.id,replyuser.userName,replyuser.userId,1,index)" v-if="backShow">
                            <span>{{replyuser.userName}}</span> 回复 <span>{{replyuser.originalUserName}}</span>：{{replyuser.content}}
                        </div>
                        <!--未登陆-->
                        <router-link :to="{name:'login'}">
                            <div class="comment-reply-back" v-for="replyuser in item.comments" v-if="!backShow">
                                <span>{{replyuser.userName}}</span> 回复 <span>{{replyuser.originalUserName}}</span>：{{replyuser.content}}
                            </div>
                        </router-link>
                    </div>
                </div>
            </div>
        </div>
        <z-good ref="selectfood" :good="good" v-if="good" @comment="comment"></z-good>
    </div>
</div>
</div>
</div>
</template>

<script>
    import zgood from '../../component/detail/good.vue'
    import {userService} from '../../service/userService'
    export default {
        components:{'z-good':zgood},
        props:['good'],
        data () {
            return {
                id:'',
                pageNo:1,
                text:[],
                backShow:false,
                commentlists:[],
                page:{num:1,size:5}
            }
        },
        mounted: function() {
            let that = this;
            let token = window.localStorage.getItem('token');
            if(token){
                that.backShow = true;
            }else{
                that.backShow = false;
            }
            that.upCallback()
            // console.log(that.good);

        },
        methods: {
            //回复楼主
            onreply:function(id,name,userId,type,index){
                this.$store.state.userId = userId;
                this.$store.state.replyId = id;
                this.$store.state.replyName = name;
                this.$store.state.type = type;
                this.$refs.selectfood.writeing(index);
            },
            //有回复
            addreply:function(id,name,userId,type,index){
                //调用组件
                this.$store.state.userId = userId;
                this.$store.state.replyId = id;
                this.$store.state.replyName = name;
                this.$store.state.type = type;
                this.$refs.selectfood.writeing(index);
            },
            upCallback(){
                let that = this;
                let params = {level:'1',pageNo:that.page.num,pageSize:that.page.size,parentId:'',typeId:that.good.id,type:that.good.type}
                userService.getComments(params).then(function(res){
                    if(!res.data || !res.data.datas) return
                    let list = res.data.datas.datas
                    if(that.page.num*1===1){
                        that.commentlists=res.data.datas.datas
                    }else{
                        for(let i in list){
                            that.commentlists.push(list[i])
                        }
                    }
                    if(that.good.type==1)that.$parent.total=res.data.datas.totalCount
                    console.log(111,that.$parent.total);
                    that.page.num+=1
                    if(that.mescroll) that.mescroll.endSuccess(list.length);
                })
            },
            back(){
                document.getElementById('shouldfix').style.overflow='scroll'
                document.getElementById('shouldfix').style.height='auto'
                this.$parent.showComment = false;
            },
            comment(){
                this.$emit('comment',1)
            }
        }
    }
</script>

<style lang="less">
#comment {
    position:  fixed;
    top: 0;
    width:  100%;
    height:  100%;
    left:  0;
    background:  #fff;
    #purchased{
        width:100%;
        z-index:1000;
        .purchased-top{
            text-align: center;
            width:100%;
            height:1.2rem;
            background:#fff;
            box-shadow: inset 0 -1px 0 0 rgba(221,221,221,0.50);
            i{
                float:left;
                font-size:0.5rem;
                line-height:1.2rem;
                margin-left:0.2rem;
                color:#999999;
                display: block;
            }
            span{
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                width: 60%;
                display: inline-block;
                margin-left:-1rem;
                height:1.2rem;
                line-height:1.2rem;
                font-size: 18px;
                color: #333333;
                letter-spacing: 0.3px;
            }
        }
    }
}
body{
    background:#fff;
}
.comment-title{
    // width:100%;
    padding:0.8rem 0.4rem 0.8rem 0.4rem;
    .comment-title-wire{
        width:3px;
        border:1.5px;
        height:16px;
        background: #6699FF;
        float:left;
        margin-top:3px;
    }
    .comment-title-text{
        width:3rem;
        text-align:left;
        font-size: 16px;
        color: #333333;
        margin-left:7px;
    }
}
.comment-box{
    width:100%;
    padding:0 0.4rem;
    box-sizing: border-box;
    overflow: hidden;
    margin-bottom: .2rem;
    .commentlists-no{
        height:2.1rem;
        line-height:2.1rem;
        font-size: 13px;
        color: #999999;
        letter-spacing: 0;
    }
    .comment-list {
        width: 100%;
        padding: 16px 0 16px 0;
        border-bottom: 1px solid #EEEEEE;
        display:inline-block;
        .comment-list-left {
            width: 1.1rem;
            height:1.1rem;
            border-radius: 100%;
            overflow: hidden;
            float:left;
            img {
                width:100%;
                height:100%;

            }
        }
        .comment-list-right{
            width:7.5rem;
            float:left;
            margin-left:0.27rem;
            .comment-list-top{
                width:100%;
                height:0.67rem;
                .comment-list-name{
                    font-size: 14px;
                    color: #666666;
                    float:left;
                }
                .comment-list-reply{
                    text-align: center;
                    width:1.33rem;
                    height:0.67rem;
                    float:right;
                    line-height:0.67rem;
                    background: #F9F9F9;
                    border-radius: 50px;
                    font-size: 12px;
                    color: #333333;
                    letter-spacing: 0;
                    text-align: center;
                }
            }
            .comment-list-center{
                text-align:left;
                font-size: 14px;
                color: #1F2D3D;
                letter-spacing: 0;
                line-height: 20px;
                margin-top:0.29rem;
            }
            .comment-list-time{
                width:100%;
                height:0.43rem;
                margin-top:0.27rem;
                font-size: 11px;
                color: #999999;
                letter-spacing: 0;
                text-align: left;
            }
            .comment-reply-content{
                background: #F9F9F9;
                border-radius: 2px;
                padding:0.27rem 0.27rem 0 0.27rem;
                text-align:left;
                font-size: 14px;
                color: #151515;
                letter-spacing: 0;
                line-height: 20px;
                margin-top:0.37rem;
                overflow: hidden;
                .comment-reply-back{
                    margin-bottom:0.26rem;
                }
                span{
                    color:#999;
                }
            }
        }
    }
    .comment-list:last-child{
        border-bottom: none;
    }
}

</style>